<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>动态路由匹配</title>
</head>

<body>
  <div id="app">
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/user/foo">Go to Foo</router-link>
      <router-link to="/user/bar">Go to Bar</router-link>
      <router-link to="/user/evan/post/123">Show $route.params</router-link>
    </p>

    <router-view></router-view>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
    const User = {
      template: '<div>User {{ $route.params.id }}</div>'
    }

    const Params = {
      template: '<div>$route.params: {{ $route.params }}</div>'
    }

    const router = new VueRouter({
      routes: [{
        path: '/user/:id',
        component: User
      },{
        path: '/user/:username/post/:post_id',
        component: Params
      }]
    })

    const app = new Vue({
      router
    }).$mount('#app')

  </script>
</body>

</html>
